<template>
    <div class="wrapper">
        <a-loading ref="loading"></a-loading>
        <div class="detail">
            <div class="title">{{ posInfo.USE_TYPE_NAME }}-{{ posInfo.COMPONENT_TYPE }}</div>
            <div class="container">
                <img class="posImg" src="@/assets/posImg/dq.jpg" v-if="posInfo.USE_TYPE == 'DQPOS'" alt="" />
                <img class="posImg" src="@/assets/posImg/ct.jpg" v-else alt="" />

                <div class="content">
                    <div>终端SN：{{ posInfo.POS_SN }}</div>
                    <div>终端类型：{{ posInfo.USE_TYPE_NAME }}</div>
                    <div>终端型号：{{ posInfo.COMPONENT_TYPE }}</div>
                    <div v-if="posInfo.ACT_NAME">参与活动：{{ posInfo.ACT_NAME }}</div>
                    <div v-if="posInfo.CUSTOMER_NAME">终端商户：{{ posInfo.CUSTOMER_NAME }}</div>
                    <div v-if="posInfo.RATE">终端费率：{{ posInfo.RATE }}%</div>
                    <div v-if="posInfo.BIND_TIME">绑定时间：{{ posInfo.BIND_TIME }}</div>
                    <div v-if="posInfo.ACTIVITY_TIME">唤醒时间：{{ posInfo.ACTIVITY_TIME }}</div>
                    <div>
                        是否唤醒：
                        <text :style="{ color: posInfo.IS_ACTIVATE === 'Y' ? '#09C22E' : '#FB5151' }">
                            {{ posInfo.IS_ACTIVATE === 'Y' ? '已唤醒' : '未唤醒' }}
                        </text>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { PosDetail } from '../../api/posManagement'
export default {
    data() {
        return {
            list: [],
            posInfo: {},
            tusn: ''
        }
    },
    created(option) {
        this.tusn = this.$route.query.tusn
        this.getDetail()
    },
    methods: {
        // 日期格式化
        parseTime(time, pattern) {
            if (arguments.length === 0 || !time) {
                return null
            }
            const format = pattern || '{y}-{m}-{d} {h}:{i}:{s}'
            let date
            if (typeof time === 'object') {
                date = time
            } else {
                if (typeof time === 'string' && /^[0-9]+$/.test(time)) {
                    time = parseInt(time)
                } else if (typeof time === 'string') {
                    time = time.replace(new RegExp(/-/gm), '/')
                }
                if (typeof time === 'number' && time.toString().length === 10) {
                    time = time * 1000
                }
                date = new Date(time)
            }
            const formatObj = {
                y: date.getFullYear(),
                m: date.getMonth() + 1,
                d: date.getDate(),
                h: date.getHours(),
                i: date.getMinutes(),
                s: date.getSeconds(),
                a: date.getDay()
            }
            const time_str = format.replace(/{(y|m|d|h|i|s|a)+}/g, (result, key) => {
                let value = formatObj[key]
                // Note: getDay() returns 0 on Sunday
                if (key === 'a') {
                    return ['日', '一', '二', '三', '四', '五', '六'][value]
                }
                if (result.length > 0 && value < 10) {
                    value = '0' + value
                }
                return value || 0
            })
            return time_str
        },
        NumberMul(arg1, arg2) {
            var m = 0
            var s1 = arg1.toString()
            var s2 = arg2.toString()
            try {
                m += s1.split('.')[1].length
            } catch (e) {}
            try {
                m += s2.split('.')[1].length
            } catch (e) {}

            return (Number(s1.replace('.', '')) * Number(s2.replace('.', ''))) / Math.pow(10, m)
        },
        getDetail() {
            PosDetail({ tusn: this.tusn,posSn: this.tusn }).then(res => {
                const { code, message, object } = res
                this.posInfo = object || {}
                if (this.posInfo.BIND_TIME) {
                    this.posInfo.BIND_TIME = this.parseTime(this.posInfo.BIND_TIME)
                }
                if (this.posInfo.ACTIVITY_TIME) {
                    this.posInfo.ACTIVITY_TIME = this.parseTime(this.posInfo.ACTIVITY_TIME)
                }
                this.posInfo.RATE = this.posInfo.RATE ? this.NumberMul(this.posInfo.RATE, 100) : this.posInfo.RATE
            })
        }
    }
}
</script>

<style lang="scss" scoped>
.wrapper{
    padding: 10px;
}
.detail {
    width: 100%;
    background: #ffffff;
    border-radius: 11px;
    margin-bottom: 11px;
    .title {
        width: 100%;
        height: 29px;
        background: linear-gradient(180deg, #66d6ff 0%, #66d6ff 100%);
        border-radius: 11px 11px 0px 0px;
        font-size: 14px;
        //font-family: Microsoft YaHei-Regular, Microsoft YaHei;
        font-family: 'Avenir', Helvetica, Arial, sans-serif;
        font-weight: 400;
        color: #ffffff;
        text-align: center;
        line-height: 29px;
    }
    .container {
        width: 100%;
        display: flex;
        padding: 10px;
        align-items: center;
        font-family: 'Avenir', Helvetica, Arial, sans-serif;
        font-size: 14px;
        //font-family: Microsoft YaHei-Regular, Microsoft YaHei;
        img {
            width: 19%;
            height: 100%;
            margin: 0 10px;
            display: inline-block;
        }

        .content {
            flex: 1;
            line-height: 30px;

            color: #545454;
            padding: 10px;
            box-sizing: border-box;
            div {
                font-size: 14px;
                font-family: 'Avenir', Helvetica, Arial, sans-serif;
                font-weight: 400;
            }
        }
    }
}
</style>
